<template>
  <div class="bianj">
    <div class="header">
      <el-input v-model="title" maxlength="20" placeholder="请输入标题"></el-input>
    </div>
    <div class="mavonEditor">
      <div>
        <mavon-editor
          @change="changeData"
          class="nossr"
          :toolbarsBackground="'#cccccc'"
          :previewBackground="'#fbfbfb'"
          :scrollStyle="true"
          v-model="handbook"
        />
      </div>
    </div>
    <div class="footer">
      <div class="tijiao">
        <div class="tj_a">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              <i :class="icon"></i>
              <b>{{ titles }}</b>
              <span>{{ text }}</span>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(item, index) in tabledate"
                :key="index"
                :command="item"
              >
                <i :class="item.icon"></i>
                <b>{{ item.title }}</b>
                <span>{{ item.text }}</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="tj_a">
          <el-button type="success" @click="btnFabu(texts)">发布</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {addInvite} from "../api/cate"
export default {
  name: "fatie",
  data() {
    return {
      icon: "el-icon-s-promotion",
      titles: "分享",
      text: "分享对别有帮助的经验和见解",
      tabledate: [
        {
          icon: "el-icon-s-promotion",
          title: "分享",
          text: "分享对别人有帮助的经验和见解",
        },
        {
          icon: "el-icon-question",
          title: "问题",
          text: "自己在学习中遇到的困难",
        },
        {
          icon: "el-icon-info",
          title: "思绪",
          text: "思考过程的记录与重放",
        },
        {
          icon: "el-icon-s-order",
          title: "公告",
          text: "公告帖",
        },
      ],
      title: "",
      handbook: "",//富文本编辑器内容
      texts: "",
    };
  },
  methods: {
    handleCommand(val) {
      console.log(val);
      this.icon = val.icon;
      this.titles = val.title;//分类
      this.text = val.text;
    },
    changeData(value, render) {
      this.handbook = render;
      this.texts = render;
    },
    btnFabu(val) {
   
      let obj = {
        inviteContent: val,//正文帖子 H5
        inviteTitle: this.title,//帖子标题
        type: this.titles,//分类
        userCode: sessionStorage.getItem("userCode"),//用户id
      };
      console.log("!!!!"+obj.type)
      if(obj.inviteContent==""||obj.type==""||obj.inviteTitle==""){
        this.$alert("请检查帖子是否为空", "提示", {confirmButtonText: "确定"})
      }else{
      addInvite(obj).then((res) => {
          if (res.data.code === 200) {
            this.$alert("发布成功", "提示", {
              confirmButtonText: "确定",
              callback: (action) => {
                this.$message({
                  type: "info",
                  message: res.data.responseMsg,
                });
                this.$router.push("/homePage");
              },
            });
          } else {
            this.$message.error("发帖失败");
          }
        }).catch((error) => {
          this.$message.error("发帖失败");
        });
      }
    },
  },
};
</script>

<style scoped>
.bianj {
  width: 100%;
  height: 100%;
}
.mavonEditor {
  width: 100%;
  height: 400px;
}

.header {
  background: rgb(195, 225, 233);
}
.header .el-input {
  width: 100%;
  font-size: 26px;
  height: 10%;
  padding: 3px;
}
.footer {
  width: 100%;
  height: 30%;
  padding-bottom: 100px;
  background: rgba(137, 212, 235, 0.398);
}
.tijiao {
  line-height: 80px;
  height: 80px;
}
.tj_a {
  float: left;
  width: 50%;
}
.el-dropdown-link {
  cursor: pointer;
  font-size: 18px;
}
</style>
<style>
.nossr {
  position: absolute;
  width: 100%;
  height: 400px;
}
</style>